<style scoped lang='less'>

    .home-page {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: scroll;
        .row {
            color: white;
        }

        background-color: #001F48;

        .mynav {
            list-style-type: none;
            display: inline-block;
            *display: inline;
            zoom: 1;
        }

        .mynav li {
            float: left;
        }

        .mynav li a {
            text-align: center;
            width: 120px;
            display: block;
            text-decoration: none;
            color: #cccccc;
        }

        .mynav li a img {
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }

        .mypanel-title {
            background: url('../../assets/image/title.png');
            background-repeat: round;
            background-size: cover;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
            margin-top: 15px;
            color: black;

            .title-icon {
                width: 18px;
            }
        }

        .mypanel-content {
            background-color: #001F59;
        }

        .mypanel-bottom {
            background: url('../../assets/image/panel_bottom.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
        }

        .zhiban-content {
            height: 170px;
            width: 100%;
            overflow: auto;
        }

        .zhiban-content::-webkit-scrollbar { /*滚动条整体样式*/
            width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 10px;
        }

        .zhiban-content::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #00698C;
        }

        .zhiban-content::-webkit-scrollbar-track { /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

        .news-ul {
            margin-bottom: 0;
        }

        .news-ul li {
            list-style-image: url('../../assets/image/li_icon.png');
            color: #cccccc;
            height: 30px;
            line-height: 30px;
            display: flex;
        }

        .news-ul .news-title {
            color: #337ab7;
            margin-left: 10px;
        }

        .my-progress {
            width: 100%;
            background-color: aquamarine;
            height: 10px;
        }

        .my-progress div {
            height: 10px;
            background-color: chocolate;
        }

        .five-line {
            display: flex;
            margin-bottom: 5px;

            .name {
                color: floralwhite;
                width: 12%;
                font-size: 12px;
            }

            .linear-text {
                width: 100%;
                display: flex;

                .linear {
                    height: 20px;
                    background-image: linear-gradient(to right, #7A88FF, #7AFFAF);
                    border-top-right-radius: 25px;
                    border-bottom-right-radius: 25px;
                    width: 80%;
                    margin: 0 10px;
                }
            }
        }

        .six-liang {
            display: flex;
            border-bottom: 1px solid #f1f4f5;
            padding: 10px;

            .item {
                display: flex;

                .num {
                    color: #00a0e9;
                    font-weight: bolder;
                }
            }

            .right {
                margin-left: 10px;
            }
        }

        .video-item {
            border: 1px solid #4c648e;
            text-align: center;
            padding: 5px 0;
            margin-top: 10px;
        }

        .video-html {
            display: flex;
            flex-wrap: wrap;

            .video-shi {
                width: 48%;
                margin-left: 10px;
                margin-top: 10px;
            }
        }
    }
</style>
<template>
    <div class="home-page">
        <div class="container-fluid">
            <!--<div class="row" style="justify-content: center;">-->
            <!--<div style="height: 45px; line-height: 45px;color: floralwhite">XXXXXXX智慧管理平台</div>-->
            <!--</div>-->
            <!--<div class="row" style="background-color: #00698C; padding-top: 10px;justify-content: center;">-->
            <!--<div class="col-xs-12">-->
            <!--&lt;!&ndash; 导航区域 &ndash;&gt;-->
            <!--</div>-->
            <!--</div>-->
            <div class="row">
                <div class="col-md-3">
                    <!-- 左侧内容区 -->
                    <!-- 通知公告 -->
                    <div id="divFastWay" class="mypanel">
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_fenbu.png" alt=""> 外来访客
                        </div>
                        <div class="mypanel-content" style="text-align: center">
                            <div id="renyuan" style="width: 350px;height: 200px;display: inline-block"></div>
                            <div style="clear: both"></div>
                            <div class="mypanel-bottom"></div>
                        </div>
                    </div>
                    <div id="cheliang" class="mypanel">
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_fenbu.png" alt=""> 车辆来访
                        </div>
                        <div class="mypanel-content" style="text-align: center">
                            <div id="zhuangbei1" style="width: 350px;height: 200px;display: inline-block"></div>
                            <div style="clear: both"></div>
                            <div class="mypanel-bottom"></div>
                        </div>
                    </div>
                    <div id="divFastWay" class="mypanel">
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/bigscreen_title_icon.png" alt=""> 快捷访问
                        </div>
                        <div class="mypanel-content">
                            <ul style="padding-left: 18px;list-style-type: none;">
                                <li style="clear: both; height: 1px;"></li>
                                <li style="float: left; width: 140px; padding: 10px;" @click="jumpPage('','politicalAdmin')">
                                    <a>
                                        <div class="text-center"><img src="../../assets/image/zhengongguanli.png" style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            政工管理
                                        </div>
                                    </a>
                                </li>
                                <li style="float: left; width: 140px; padding: 10px;" @click="jumpPage('','AfterAdmin')">
                                    <a>
                                        <div class="text-center"><img src="../../assets/image/houzhuangguanli.png" style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            后装管理
                                        </div>
                                    </a>
                                </li>
                                <li style="float: left; width: 140px; padding: 10px;" @click="jumpPage('','SafeAdmin')">
                                    <a>
                                        <div class="text-center"><img src="../../assets/image/anquanguanli.png" style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            安全管理
                                        </div>
                                    </a>
                                </li>
                                <li style="float: left; width: 140px; padding: 10px;">
                                    <a :href="oaUrl">
                                        <div class="text-center"><img src="../../assets/image/oahuiyiguanli.png"
                                                                      style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            办公OA
                                        </div>
                                    </a>
                                </li>
                                <li @click="jumpPage('','HolidayApply')"
                                    style="float: left; width: 140px; padding: 10px;">
                                    <a>
                                        <div class="text-center"><img src="../../assets/image/qingjia.png"
                                                                      style="width: 35px; height: 35px;"></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            外出申请
                                        </div>
                                    </a>
                                </li>
                                <li @click="jumpPage('','DispatchCarApply')"
                                    style="float: left; width: 140px; padding: 10px;">
                                    <a>

                                        <div class="text-center"><img src="../../assets/image/yongcheguanli01.png"
                                                                      style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            车辆申请
                                        </div>
                                    </a>
                                </li>
                                <li @click="jumpPage('','home')"
                                    style="float: left; width: 140px; padding: 10px;">
                                    <a>

                                        <div class="text-center"><img src="../../assets/image/guanli.png"
                                                                      style="width: 35px; height: 35px;"/></div>
                                        <div class="text-center"
                                             style="font-size: 11pt; color: #cccccc; margin-top: 5px;font-weight: bolder">
                                            进入管理后台
                                        </div>
                                    </a>

                                </li>
                            </ul>
                            <div style="clear: both"></div>
                            <div class="mypanel-bottom"></div>
                        </div>
                    </div>
                    <!-- 左侧内容区结束 -->
                </div>
                <div class="col-md-6" style="border: 0px solid #02ccec;border-radius: 4px;padding: 10px 0;">
                    <!-- 中间内容区 -->
                    <!--<div id="renyuan" style="width: 900px;height:700px;"></div>-->
                    <div id="zhuangbei2" style="width: 900px;height:700px;"></div>
                </div>
                <div class="col-md-3">
                    <!-- 右侧内容区 -->
                    <div>
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_video.png" alt=""> 电子涉密物资储存情况
                        </div>
                        <div class="mypanel-content" style="padding:15px">
                           <div id="pingbi" style="width: 350px;height: 200px;display: inline-block"></div>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                    <div>
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_video.png" alt=""> 查哨
                        </div>
                        <div class="mypanel-content" style="padding:15px">
                           <div id="jiguan" style="width: 350px;height: 200px;display: inline-block"></div>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                    <div>
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_video.png" alt=""> 快递情况
                        </div>
                        <div class="mypanel-content" style="padding:15px">
                           <div id="kuaidi" style="width: 350px;height: 200px;display: inline-block"></div>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                    <!-- 右侧内容区结束 -->
                </div>
            </div>
        </div>
        <!-- 新闻浏览对话框 -->
        <div id="newsView" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="newsViewModelLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="newsTitle">[News Title]</h4>
                    </div>
                    <div class="modal-body">
                        <p>发布时间：<span id="newsPubDate">[PubDate]</span></p>
                        <p id="newsContent"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新闻浏览对话框结束 -->
        <!-- 人员查看详情对话框 -->
        <div id="peopleDetail" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="newsViewModelLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">人员信息一览</h4>
                    </div>
                    <div class="modal-body">
                        <p>
                            <img id="peopleHeadImg" src="" alt="人员头像" style="width: 120px; height: 160px;"/>
                        </p>
                        <p>
                            姓名：<span id="peopleName"></span>
                        </p>
                        <p>
                            性别：<span id="peopleSex"></span>
                        </p>
                        <p>
                            职务：<span id="peopleDuty"></span>
                        </p>
                        <p>
                            所在部门：<span id="peopleOrgName"></span>
                        </p>
                        <p>
                            联系方式：<span id="peopleContact"></span>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import homeNav from '../../components/homeNav'

    export default {
        data() {
            return {
                orgOptions: {},
                innerHeight: '',
                innerWidth: '',
            }
        },
        mounted: function () {
            this.drawChart();
            this.pingbiChart();
            this.drawChart2();
            this.drawChart3();
            this.jiguanTu();
            this.kuaidiTu();
            this.drawChart4();

            this.innerWidth = window.innerWidth;

        },
        created: function () {

        },
        components: {
            homeNav
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }
                this.$router.push(route);
            },
            //人员饼图统计
            drawChart() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("renyuan"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    color: ['#feee51', '#7bd9a5'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['上周', '本周'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                            "axisLine": {       //x轴
                                "show": false,
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            "axisTick": {       //x轴刻度线
                                "show": false
                            },
                            "splitLine": {     //网格线
                                "show": false
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            "axisLine": {       //x轴
                                "show": false,
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            "axisTick": {       //x轴刻度线
                                "show": false
                            },
                            "splitLine": {     //网格线
                                "show": false
                            },
                        }
                    ],
                    series: [
                        {
                            name: '上周',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [3, 10, 50, 40, 90, 60, 100]
                        },
                        {
                            name: '本周',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [186, 182, 191, 234, 50, 330, 310]
                        },

                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, "light");
            },
            drawChart2() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("zhuangbei1"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['上周', '本周'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                            "axisLine": {       //x轴
                                "show": false,
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            "axisTick": {       //x轴刻度线
                                "show": false
                            },
                            "splitLine": {     //网格线
                                "show": false
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            "axisLine": {       //x轴
                                "show": false,
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            "axisTick": {       //x轴刻度线
                                "show": false
                            },
                            "splitLine": {     //网格线
                                "show": false
                            },
                        }
                    ],
                    series: [
                        {
                            name: '上周',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [3, 10, 50, 40, 90, 60, 100]
                        },
                        {
                            name: '本周',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },

                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            drawChart3() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("zhuangbei2"));
                // let data =this.genData();

                let option={
                    color: ['#feee51', '#7bd9a5'],
                    title: {
                        text: '兵员分布情况',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '7%',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        // trigger: 'axis',
                        showDelay: 0,
                        formatter: function (params) {
                            if (params.value.length > 1) {
                                return params.seriesName + ' :<br/>'
                                    + params.value[0] + 'cm '
                                    + params.value[1] + 'kg ';
                            }
                            else {
                                return params.seriesName + ' :<br/>'
                                    + params.name + ' : '
                                    + params.value + 'kg ';
                            }
                        },
                        axisPointer: {
                            show: true,
                            type: 'cross',
                            lineStyle: {
                                type: 'dashed',
                                width: 1
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataZoom: {},
                            brush: {
                                type: ['rect', 'polygon', 'clear']
                            }
                        }
                    },
                    brush: {
                    },
                    legend: {
                        data: ['海军', '步兵'],
                        left: 'center'
                    },
                    xAxis: [
                        {
                            type: 'value',
                            scale: true,
                            axisLabel: {
                                formatter: '{value} cm',
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
                            axisLabel: {
                                formatter: '{value} kg',
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '海军',
                            type: 'scatter',
                            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
                                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
                                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
                                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
                                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
                                [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
                                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
                                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
                                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
                                [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
                                [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
                                [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
                                [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
                                [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
                                [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
                                [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
                                [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
                                [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
                                [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
                                [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
                                [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
                                [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
                                [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
                                [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
                                [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
                                [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
                                [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
                                [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
                                [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
                                [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
                                [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
                                [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
                                [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
                                [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
                                [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
                                [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
                                [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
                                [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
                                [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
                                [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
                                [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
                                [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
                                [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
                                [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
                                [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
                                [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
                                [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
                                [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
                                [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
                                [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
                                [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
                                [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
                            ],
                            markArea: {
                                silent: true,
                                itemStyle: {
                                    color: 'transparent',
                                    borderWidth: 1,
                                    borderType: 'dashed'
                                },
                                data: [[{
                                    name: '海军',
                                    xAxis: 'min',
                                    yAxis: 'min'
                                }, {
                                    xAxis: 'max',
                                    yAxis: 'max'
                                }]]
                            },
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                lineStyle: {
                                    type: 'solid'
                                },
                                data: [
                                    {type: 'average', name: '平均值'},
                                    { xAxis: 160 }
                                ]
                            }
                        },
                        {
                            name: '步兵',
                            type: 'scatter',
                            data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
                                [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
                                [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
                                [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
                                [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
                                [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
                                [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
                                [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
                                [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
                                [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
                                [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
                                [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
                                [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
                                [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
                                [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
                                [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
                                [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
                                [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
                                [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
                                [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
                                [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
                                [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
                                [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
                                [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
                                [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
                                [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
                                [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
                                [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
                                [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
                                [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
                                [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
                                [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
                                [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
                                [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
                                [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
                                [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
                                [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
                                [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
                                [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
                                [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
                                [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
                                [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
                                [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
                                [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
                                [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
                                [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
                                [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
                                [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
                                [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
                                [180.3, 83.2], [180.3, 83.2]
                            ],
                            markArea: {
                                silent: true,
                                itemStyle: {
                                    color: 'transparent',
                                    borderWidth: 1,
                                    borderType: 'dashed'
                                },
                                data: [[{
                                    name: '步兵分布',
                                    xAxis: 'min',
                                    yAxis: 'min'
                                }, {
                                    xAxis: 'max',
                                    yAxis: 'max'
                                }]]
                            },
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                lineStyle: {
                                    type: 'solid'
                                },
                                data: [
                                    {type: 'average', name: '平均值'},
                                    { xAxis: 170 }
                                ]
                            }
                        }
                    ]
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            drawChart4() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("zhuangbei3"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            splitLine: {show: false},
                            splitArea: {show: false},
                            // 去除y轴上的刻度线
                            axisTick: {
                                show: false
                            },
                            //  隐藏y轴
                            axisLine: {show: false},
                            axisLabel: {
                                textStyle: {
                                    color: '#030a40',
                                    fontSize: '16'
                                },
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'category',
                            data: ['送修', '借出', '在位', '集训'],
                            splitLine: {show: false},
                            splitArea: {show: false},
                            // 去除y轴上的刻度线
                            axisTick: {
                                show: false
                            },
                            //  隐藏y轴
                            axisLine: {show: false},
                            //  改变y轴字体颜色和大小
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: '16'
                                },
                            },
                        }
                    ],
                    series: [
                        {
                            name: '2011年',
                            type: 'bar',
                            data: [18203, 23489, 29034, 104970, 131744, 630230]
                        },

                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            pingbiChart() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("pingbi"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['在位', '外带', '使用中', '总和'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        "axisLine": {       //x轴
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        "axisTick": {       //x轴刻度线
                            "show": false
                        },
                        "splitLine": {     //网格线
                            "show": false
                        },
                    },
                    yAxis: {
                        type: 'category',
                        data: ['笔记本电脑', '移动储存介质'],
                        "axisLine": {       //x轴
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        "axisTick": {       //x轴刻度线
                            "show": false
                        },
                        "splitLine": {     //网格线
                            "show": false
                        },
                    },
                    series: [
                        {
                            name: '在位',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'insideRight'
                            },
                            data: [320, 302, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '外带',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'insideRight'
                            },
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '使用中',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'insideRight'
                            },
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '总和',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'insideRight'
                            },
                            data: [150, 212, 201, 154, 190, 330, 410]
                        },

                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            jiguanTu() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("jiguan"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['南门', '大东门', '小门', '车场', '炮场','加油站','办公室']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['南门', '大东门', '小门', '车场', '炮场','加油站','办公室'],
                        "axisLine": {       //x轴
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        "axisTick": {       //x轴刻度线
                            "show": false
                        },
                        "splitLine": {     //网格线
                            "show": false
                        },
                    },
                    yAxis: {
                        type: 'value',
                        "axisLine": {       //x轴
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        "axisTick": {       //x轴刻度线
                            "show": false
                        },
                        "splitLine": {     //网格线
                            "show": false
                        },
                    },
                    series: [
                        {
                            name: '基层',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '机关',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },

                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            kuaidiTu() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("kuaidi"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    color: ['#3398DB','#ca8622'],

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['已取', '未取'],
                        textStyle:{
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['司令部', '政治处', '保障处', '一营','二营'],
                            "axisLine":{       //y轴
                                "show":false,
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            "axisTick":{       //y轴刻度线
                                "show":false
                            },
                            "splitLine": {     //网格线
                                "show": false
                            },
                        },

                    ],
                    yAxis: [
                        {
                            type: 'value',
                            "axisLine":{       //y轴
                                "show":false,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            axisLabel: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            "axisTick":{       //y轴刻度线
                                "show":false
                            },
                            "splitLine": {     //网格线
                                "show": false
                            }
                        },
                    ],
                    series: [
                        {
                            name: '已取',
                            type: 'bar',
                            data: [320, 332, 301, 334, 390, 330, 320]

                        },
                        {
                            name: '未取',
                            type: 'bar',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
        }
    }
</script>
